<template>
  <component>
    <Tree
      :treeData='treeData'
      :tickType='tickType'
      :tickeds='tickeds'
      @update:ticked='tickedFn'
    />
  </component>
</template>

<script lang='ts'>
import { defineComponent, onMounted, PropType, ref, watch } from 'vue';
import Tree from './component/Tree.vue'
import { TreeObj } from './model/TreeObj'
import { TreeBO } from 'pages/tree/model/TreeBO';
import { ChainBO, ChanReqData } from 'pages/tree/model/Interfaces';
import { fetchChainData, getChainTop, getTickedObjByIds } from './functions/TreeData';
export default defineComponent({
  name: 'TreeEntity',
  components: {Tree},
  props: {
    reqData: {
      type: Object as PropType<ChanReqData>,
    },
    tickType: {
      type: String
    },
    tickeds: {
      type: [String]
    },
    disable: {
      type: Boolean
    }
  },
  setup (props,contex) {
    let allChain = []
    function tickedFn (data) {
      contex.emit("update:ticked", data)
      const tickedObjByIds = getTickedObjByIds(data,allChain);
      contex.emit("update:tickObj", tickedObjByIds)
    }

    let treeData = ref<TreeObj>()
    watch(() => props.reqData,(reqData) => {
        flushData(props.disable)
    },
      {deep:true})


    function flushData (disable: boolean) {
      treeData.value = undefined
      fetchChainData(props.reqData,(data:ChainBO[]) => {
        allChain = data
        const chainTop = getChainTop(data);
        const treeBO = new TreeBO(chainTop,data);
        treeData.value = new TreeObj(treeBO,disable);
      })
    }

    onMounted(() => {
      flushData(props.disable)
    })
    return {
      treeData,
      tickedFn
    }
  }
});
</script>

<style scoped>

</style>
